<template>
  <el-container>
    <el-header>轮播图管理</el-header>
    <el-main>
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="发布日期">
          <el-date-picker
              v-model="fabudate"
              type="daterange"
              @change="dateCL"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.name" placeholder="请输入关键字" @blur="findAll"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toAdd">新增轮播图</el-button>
        </el-form-item>
      </el-form>
      <el-table
          :data="data"
          border
          style="width: 100%">
        <el-table-column
            prop="paixu"
            label="序号">
        </el-table-column>
        <el-table-column
            label="图片">
          <template slot-scope="scope">
            <img :src="scope.row.img" alt="" style="width: 100px;height: 100px">
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="轮播图名称">
        </el-table-column>
        <el-table-column
            prop="faburen"
            label="发布人">
        </el-table-column>
        <el-table-column
            prop="fabudate"
            label="发布时间">
        </el-table-column>
        <el-table-column
            label="状态">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                @change="updateStatus(scope.row.id)"
                active-text="启用"
                inactive-text="禁用"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="toUpdate(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="de(scope.row.id)" type="text" size="small" style="color: red">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pn"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="ps"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
      <el-dialog title="轮播图管理" :visible.sync="dia" width="85%">
        <el-form :model="pojo">
          <el-form-item label="轮播图标题">
            <el-input v-model="pojo.name"></el-input>
          </el-form-item>
          <el-form-item label="轮播图片">
            <el-upload
                class="avatar-uploader"
                action="http://localhost:8088/lunbotu/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="链接">
            <el-input v-model="pojo.url"></el-input>
          </el-form-item>
          <el-form-item label="排序号">
            <el-input v-model="pojo.paixu"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-switch
                v-model="pojo.status"
                active-text="启用"
                inactive-text="禁用"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
          <el-form-item label="发布人">
            <el-input v-if="pojo.faburen" v-model="pojo.faburen" disabled></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dia = false">返回</el-button>
          <el-button type="primary" @click="add">保存</el-button>
          <el-button type="danger" @click="de(pojo.id)">删除</el-button>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
import axios from "axios";
export default {
  data(){
    return{
      pojo:{},
      imageUrl:'',
      dia:false,
      fabudate:[],
      form:{},
      data:[],
      total:0,
      pn:1,
      ps:10
    }
  },
  methods:{
    updateStatus(id){
      axios.get(`http://localhost:8088/lunbotu/updateStatus?id=${id}`).then(res=>{
        this.$message.success("修改成功");
        this.findAll();
      })
    },
    de(id){
      axios.get(`http://localhost:8088/lunbotu/de?id=${id}`).then(res=>{
        this.$message.success("删除成功");
        this.findAll();
      })
    },
    handleAvatarSuccess(res, file) {
      this.pojo.img=res;//给图片地址赋值
      //展示预览图
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
     return isJPG && isLt2M;
    },
    toUpdate(row){
      this.pojo=row;
      this.imageUrl=row.img;
      this.dia=true;
    },
    add(){
      axios.post(`http://localhost:8088/lunbotu/save`,this.pojo).then(res=>{
        this.$message.success("处理成功");
        this.dia=false;
        this.pojo={};
        this.imageUrl='';
        this.findAll();
      })
    },
    findAll(){
      axios.post(`http://localhost:8088/lunbotu/findAll?pn=${this.pn}&ps=${this.ps}`,this.form).then(res=>{
        this.data=res.data.data.records;
        this.total=res.data.data.total;
      })
    },
    handleSizeChange(val) {
      this.ps = val;
      this.findAll();
    },
    handleCurrentChange(val) {
      this.pn = val;
      this.findAll();
    },
    toAdd(){
      this.pojo={};
      this.imageUrl='';
      this.dia=true;
    },
    dateCL(){
      this.form.min=this.fabudate[0];
      this.form.max=this.fabudate[1];
      this.findAll();
    }
  },
  mounted() {
    this.findAll();
  }
}
</script>

<style scoped>

</style>